{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
	<link href="{{ asset('bundles/applicationbootstrap/css/fonts/font-awesome/font-awesome.css') }}" rel="stylesheet" type="text/css" media="all" />
	<link href="{{ asset('//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css') }}" rel="stylesheet" type="text/css" media="all" />
	{#<link href="{{ asset('bundles/applicationbootstrap/css/forms/jquery-ui-timepicker-addon/theme/dark.css') }}" rel="stylesheet" type="text/css" media="all" />#}
	<link href="{{ asset('bundles/applicationbootstrap/css/forms/jquery-ui-timepicker-addon/jquery-ui-timepicker-addon.css') }}" rel="stylesheet" type="text/css" media="all" />
	<style>
		#ui-datepicker-div, .ui-datepicker{
		   font-size:12px;
		}
	</style>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/applicationbootstrap/js/forms/jquery-ui-timepicker-addon/jquery-ui-timepicker-addon.js') }}" type="text/javascript"></script>
    
	<script type="text/javascript">
	    $(document).ready(function() {

		    //Basic Initializations
	    	$('#input_date').datepicker({ 
		    	dateFormat: "dd/mm/yy" //dd-mm-yy, yy-mm-dd
		    });
	    	$('#input_time').timepicker({timeFormat: "HH:mm:ss"});
	    	$('#input_datetime').datetimepicker({
	    		timeFormat: "HH:mm",
		    	dateFormat: "dd/mm/yy"
		    });

		    //Time Restraints
		    $('#rest_example_1').timepicker({
				hourMin: 8,
				hourMax: 16
			});
		    $('#rest_example_2').datetimepicker({
		    	dateFormat: "dd/mm/yy",
		    	numberOfMonths: 2,
		    	minDate: 0,
		    	maxDate: 30
		    });

		    //Alternate Fields
	    	$('#alt_example_1').datetimepicker({
	    		dateFormat: "dd/mm/yy",
	    		altField: "#alt_example_1_alt"
	    	});
	    	
	    	//Utilities
	    	var ex13 = $('#utility_example_1');

	    	ex13.datetimepicker({
	    		dateFormat: "dd/mm/yy",
	    		timeFormat: 'hh:mm tt z',
	    		separator: ' @ ',
	    		showTimezone: true
	    	});
			
	    	$('#utility_example_1_setdt').click(function(){
	    		ex13.datetimepicker('setDate', (new Date()) );
	    	});
	    	
		});
	</script>
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="page-header">
          <h1>Datepicker jQuery UI</h1>
        </div>
        <div class="row">
        	<div class="col-lg-6">
                <form role="form">
                
                	<h3>Basic Initializations</h3>
        			<div class="form-group">
        				<label>Date</label> <code>$('#input_date').datepicker(...)</code>
	        			<div class="input-group">
	        				<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
	                        <input type="text" class="form-control" id="input_date">
	        			</div>
	        			<p class="help-block">Podstawowa funkcja biblioteki jquery-ui</p>
        			</div>
        			<div class="form-group">
        				<label>Time</label> <code>$('#input_time').timepicker(...)</code>
	        			<div class="input-group">
	        				<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
	                        <input type="text" class="form-control" id="input_time">
	        			</div>
	        			<p class="help-block">Rozszerzenie jquery-ui-timepicker-addon</p>
        			</div>
        			<div class="form-group">
        				<label>Date Time</label> <code>$('#input_datetime').datetimepicker(...)</code>
	        			<div class="input-group">
	        				<span class="input-group-addon"><i class="fa fa-calendar"></i> <i class="fa fa-clock-o"></i></span>
	                        <input type="text" class="form-control" id="input_datetime">
	        			</div>
	        			<p class="help-block">Rozszerzenie jquery-ui-timepicker-addon</p>
        			</div>
        			
        		</form>
        	</div>
        	<div class="col-lg-6">
                <form role="form">
                
        			<h3>Time Restraints</h3>
        			<div class="form-group">
        				<label>Set the min/max hour of every date:</label>
	        			<div class="input-group">
	        				<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
	                        <input type="text" class="form-control" id="rest_example_1">
	        			</div>
        			</div>
        			<div class="form-group">
        				<label>Set the min/max date numerically:</label>
	        			<div class="input-group">
	        				<span class="input-group-addon"><i class="fa fa-calendar"></i> <i class="fa fa-clock-o"></i></span>
	                        <input type="text" class="form-control" id="rest_example_2">
	        			</div>
        			</div>
        			
        			<h3>Alternate Fields</h3>
        			<div class="form-group">
        				<div class="row">
	        				<div class="col-xs-12">
	        				    <label>Alt field in the simplest form:</label>
	        				</div>
		        			<div class="col-xs-6">
			        			<div class="input-group">
			        				<span class="input-group-addon"><i class="fa fa-calendar"></i></i></span>
			                        <input type="text" class="form-control" id="alt_example_1">
			        			</div>
			        		</div>
			        		<div class="col-xs-6">
			        			<div class="input-group">
			        				<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
			                        <input type="text" class="form-control" id="alt_example_1_alt">
			        			</div>
			        		</div>
		        		</div>
        			</div>
        			
        			<h3>Utilities</h3>
                    <div class="form-group">
        				<label>Set Datetime</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input type="text" class="form-control" id="utility_example_1">
                            <span class="input-group-btn">
                                <button class="btn btn-info btn-flat" type="button" id="utility_example_1_setdt">setDate</button>
                            </span>
                        </div><!-- /input-group -->
        			</div>
                
                </form>
            </div>
        </div>
    </div> <!-- /container -->
{% endblock %}